<template>
    <view id="main">
        <!-- 顶部搜索框 -->
        <zy-topBar searchwidth="90%" scarchBottom showBack v-model="searchParam" @search="search" title="选择产生设施"
            paddingTop="40" height="40">
            <template #right>
                <view @tap="goBack" class="fs_12">确定</view>
            </template>
        </zy-topBar>
        <view class="content">
            <scroll-view scroll-y>
                <view v-for="(item, index) in facilityStore.produceList" class="item card flex"
                    :class="{ 'active': index == '1' }">
                    <image v-if="index == '1'" class="small_Icon" src="@/static/img/checked.png" />
                    <image v-else class="small_Icon" src="@/static/img/unchecked.png" />
                    <view v-if="current !== '2'" class="left flex">
                        <view class="status fs_12" :class="item.status">
                            {{
                                item.status === "s1"
                                    ? "正常"
                                    : item.status === "s2"
                                        ? "故障"
                                        : "离线"
                            }}
                        </view>
                    </view>
                    <view class="item_content flex">
                        <view class="msg title fs_16 flex">
                            <view class="label">设备编号：</view>
                            <view class="value">{{ item.name }}</view>
                        </view>
                        <view class="msg flex fs_12 color_text_gray">
                            <view class="label">设备类型：</view>
                            <view class="value">{{ item.name }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useFacilityStore } from "@/stores/modules/facility/facility";
const facilityStore = useFacilityStore();

const searchParam = ref("");
const search = (val: string) => {
    console.log(val);
};
const goBack = () => {
    uni.navigateBack();
};
</script>

<style lang="scss" scoped>
scroll-view {
    height: calc(100vh - 148px);

    .item {
        width: 92%;
        margin: 20px auto;
        position: relative;
        border-radius: 8px;

        &.active {
            background: rgb(238, 245, 255);
            border: 2px solid rgb(0, 119, 255);
        }

        .small_Icon {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .left {
            .status {
                width: 44px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                border-radius: 50%;
                color: #fff;
                margin-right: 20px;

                &.s0 {
                    background: #e5edff;
                    color: #7c8190;
                }

                &.s1 {
                    background: #4b8ef3;
                }

                &.s2 {
                    background: #fb8832;
                }
            }
        }

        .item_content {
            flex-direction: column;
            align-items: flex-start;

            .msg {
                margin-bottom: 6px;
            }
        }
    }
}
</style>
